<!--
/* 软件许可用户管理
 * Author:      cn2008tv
 * CreateTime:  2022/12/5 11:46:59 
 * LastEditor:  cn2008tv
 * ModifyTime:  2022/12/5 11:47:34 
 * Description: 
*/ 
-->
<template>
  <div class="bigBox">

    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row>

        <a-col :span="24" style="margin-bottom: 20px;text-align:center;">
          <span style="vertical-align:center;width:100%;font-size:1.4rem;font-weight:bold;">软件许可用户数据管理</span>
        </a-col>        

        <a-col :span="24" style="margin-bottom: 60px">
          <div style="padding-left: 100px">
            <a-button type="primary" @click="addhard">添加公司用户数据</a-button>

            <el-table v-if="userList.length>0" :data="userList"
                      style="overflow-y: auto;width: 100%;margin-bottom: 20px">

              <el-table-column align="center" label="公司名称">
                <template #default="scope">
                  <el-input @input="hardChange($event,scope.$index,'name')" v-model="scope.row.name"
                            :placeholder="'请输入'" style="width: 100%" />
                </template>
              </el-table-column>

              <el-table-column align="center" label="用户数">
                <template #default="scope">
                  <el-input-number @input="hardChange($event,scope.$index,'userCount')" v-model="scope.row.userCount"
                                   :placeholder="'请输入'" style="width: 100%" />
                </template>
              </el-table-column>

              <el-table-column align="center" label="排序号">
                <template #default="scope">
                  <el-input-number @input="hardChange($event,scope.$index,'sortNo')" v-model="scope.row.sortNo"
                                   :placeholder="'请输入'" style="width: 100%" />
                </template>
              </el-table-column>

              <el-table-column align="center" label="操作">
                <template #default="scope">
                  <a @click="userList.splice(scope.$index, 1)">删除</a>
                  <!--                    <a @click="deleteHardList(scope.$index)">删除</a>-->
                </template>
              </el-table-column>
            </el-table>

          </div>
        </a-col>

        <a-col :span="20"></a-col>
        <a-col :span="4">
          <a-button type="primary" @click="submit">提交</a-button>
        </a-col>

      </a-row>
    </a-form>

  </div>
</template>

<script lang="ts" setup>
import {reactive, ref,onMounted} from "vue";
import {getValueType} from "/@/utils";
import {defHttp} from "/@/utils/http/axios";
import {useMessage} from "/@/hooks/web/useMessage";
import { queryById , saveOrUpdate} from './ScreenData.api'


const labelCol = ref<any>({xs: {span: 24}, sm: {span: 5}});
const wrapperCol = ref<any>({xs: {span: 24}, sm: {span: 16}});

const formData = reactive<Record<string, any>>({
  userList: [],
});

const model = {
  id : '4',
  value: '',
  name:'软件用户',
  code:'RJYH'
};


let userList = ref([
  {name: "研究总院",userCount:0,sortNo:1},
  {name: "天津分公司",userCount:0,sortNo:2},
  {name: "海南分公司",userCount:0,sortNo:3},
  {name: "湛江分公司",userCount:0,sortNo:4},
  {name: "深圳分公司",userCount:0,sortNo:5},
  {name: "上海分公司",userCount:0,sortNo:6},
  {name: "国际公司",userCount:0,sortNo:7},
  {name: "中联公司",userCount:0,sortNo:8},
])

/* 添加
 * Author:      cn2008tv 
 * CreateTime:  2022/12/5 14:44:02 
 * LastEditor:  cn2008tv 
 * ModifyTime:  2022/12/5 14:44:02 
 * Description: 
*/ 
function addhard() {
  userList.value.push({userCount: 0, name: '',sortNo:9})
}

function hardChange(data, index, key) {
  let arr = JSON.parse(JSON.stringify(userList.value))
  arr[index][key] = data
  userList.value = arr
}

const {createMessage} = useMessage();

function submit() {
  formData.userList = userList.value;
  model.value = JSON.stringify(formData);  
  saveOrUpdate(model, true)
    .then((res) => {
      if (res.success) {
        createMessage.success(res.message);
      } else {
        createMessage.warning(res.message);
      }
    })
    .finally(() => {
    });
}


const createdData = () => {
  let params = {};
  queryById({id:'4'}).then((res) => {
    if (res.success) {
        console.log(res.result)
        let record = JSON.parse(res.result.value);
        if(record){
          Object.assign(formData,record);
          Object.assign(model, res.result);
          userList.value = record.userList?record.userList:[];
          userList.value.sort((a, b) => {
            return (a.sortNo || 0) - (b.sortNo || 0);
          });
        }
      }
    });
};

onMounted(()=>{
    createdData();
  }
);



</script>

<style scoped>
.bigBox {
  width: 100%;
  padding: 20px;
}

.antd-modal-form {
  background-color: white;
  /*overflow-y: auto;*/
  padding: 24px 24px 24px 24px;
}
</style>
